<template>
  <div class="content">
    <el-page-header @back="goBack"> </el-page-header>
    <el-card style="min-width: 1200px">
      <div class="info">
        <el-tabs v-model="activeKey" @tab-click="handleTab">
          <el-tab-pane
            v-for="(item, idx) of cacuMeals(meals)"
            :key="idx"
            :label="item.serviceName"
            :name="idx.toString()"
          ></el-tab-pane>
          <!-- <el-tab-pane label="融聚交易" name="0"> </el-tab-pane>
            <el-tab-pane label="多级商户" name="1"></el-tab-pane>
            <el-tab-pane label="用户账户" name="2"></el-tab-pane> -->
        </el-tabs>
        <div class="key key1">
          <div class="title">
            <div class="tit">{{ meals[activeKey]?.serviceName }}</div>
            <div class="desc">
              {{ meals[activeKey]?.serviceDesc }}
            </div>
          </div>
          <!-- /融聚交易 -->
          <div class="meal-list" v-if="meals[activeKey]?.versionFlag">
            <div
              class="list-item"
              :class="mealType == idx ? 'active' : ''"
              v-for="(item, idx) of mealList"
              :key="idx"
              @click="changeMeal(idx)"
            >
              <div class="top-img">
                <img
                  :src="require(`@/assets/imgs/middleWork/t${idx + 1}.png`)"
                />
              </div>
              <div class="title" :class="mealType == idx ? 'active' : ''">
                {{ item.mealName }}
              </div>
              <div class="desc" :class="mealType == idx ? 'active' : ''">
                {{ item.mealShortName }}
              </div>
              <!-- <div class="price" :class="mealType == idx ? 'active' : ''">
                <span>{{ item.price }}</span> 元/年
              </div> -->
              <div class="c-list">
                <div
                  class="c-item"
                  v-for="(citem, i) of listToArr(item.mealDesc)"
                  :key="i"
                  :class="mealType == idx ? 'active' : ''"
                >
                  <img
                    :src="
                      require(`@/assets/imgs/middleWork/${
                        mealType == idx ? 'r1' : 'r2'
                      }.png`)
                    "
                  />
                  <span>{{ citem }}</span>
                </div>
              </div>
              <!-- <div class="btn-area">
                <el-button
                  @click="showInfo(item.id, idx + 1)"
                  class="btn"
                  :class="mealType == idx ? 'active' : ''"
                  :type="`${mealType == idx ? '' : 'primary'}`"
                  >{{ item.isOut !== undefined ? "续约" : "购买" }}</el-button
                >
              </div> -->
            </div>
          </div>
          <!-- 单版本 -->
          <div v-else class="meal-list">
            <img
              :src="showImg(this.meals[this.activeKey]?.serviceImageDesc)"
              alt="图片介绍"
            />
            <!-- <img :src="window.location.origin + `/merchantApi/oss/view?id=${this.mealList[0].serviceImageDesc}`" alt=""> -->
          </div>
          <div class="order-list" v-if="command != 2">
            <div>
              <span class="tit">选择购买时长</span>
              <el-radio-group v-model="defaultOrder" @input="seleOrder">
                <el-radio
                  :label="idx"
                  v-for="(item, idx) of orderList"
                  :key="idx"
                >
                  <span>{{ item.year }}年 {{ item.fmtPrice }}元</span>
                  <span class="discount">{{ item.fmtDiscount }}折</span>
                </el-radio>
              </el-radio-group>
            </div>
            <div class="outTime">
              <el-tooltip
                class="item"
                effect="dark"
                content="Left Center 提示文字"
                placement="top"
                v-if="
                  this.meals[activeKey]?.isBuy &&
                  !this.meals[activeKey]?.isExpire
                "
              >
                <div slot="content" style="max-width: 15rem">
                  <div class="tit">
                    已购服务有效期至：{{
                      this.meals[activeKey]?.expireDateStr.substring(
                        0,
                        this.meals[activeKey]?.expireDateStr.indexOf(" ")
                      )
                    }}
                  </div>
                </div>
                <i class="el-icon-warning tip"></i>
              </el-tooltip>
              <span class="ti">
                有效日期：
                <span
                  v-if="
                    this.meals[activeKey]?.isBuy &&
                    !this.meals[activeKey]?.isExpire
                  "
                  >{{
                    startDate(
                      this.meals[activeKey]?.expireDateStr.substring(
                        0,
                        this.meals[activeKey]?.expireDateStr.indexOf(" ")
                      )
                    )
                  }}
                  至
                  {{
                    cacuDateRJ(
                      this.meals[activeKey]?.expireDateStr.substring(
                        0,
                        this.meals[activeKey]?.expireDateStr.indexOf(" ")
                      )
                    )
                  }}</span
                >
                <span v-else>即时起至{{ cacuDate }}</span>
              </span>
            </div>
          </div>
        </div>

        <!-- 多级商户管理 -->
        <!-- <div class="key key2" v-if="activeKey == 1">
          <div class="title">
            <div class="tit">多级商户管理</div>
            <div class="desc">
              精确匹配业务场景诉求，安全合理分账，
              为平台业务保驾护航，实现企业合理减税。
            </div>
          </div>

          <div class="service-list">
            <div
              class="list-item"
              :class="mealType == idx ? 'active' : ''"
              v-for="(item, idx) of serList"
              :key="idx"
            >
              <div class="top-img">
                <img :src="require(`@/assets/imgs${item.imgUrl}.png`)" />
              </div>
              <div class="title">
                {{ item.title }}
              </div>
              <div class="desc">
                {{ item.desc }}
              </div>
            </div>
          </div>
          <div class="order-list">
            <div>
              <span class="tit">选择购买时长</span>
              <el-radio-group v-model="defaultOrder" @input="seleOrder">
                <el-radio
                  :label="idx"
                  v-for="(item, idx) of orderList"
                  :key="idx"
                >
                  <span>{{ item.time }} {{ item.count }}元</span>
                  <span class="discount" v-if="item.discount !== 1"
                    >{{ item.discount * 100 }}折</span
                  >
                </el-radio>
              </el-radio-group>
            </div>
            <div class="outTime">
              <el-tooltip
                class="item"
                effect="dark"
                content="Left Center 提示文字"
                placement="top"
                v-if="this.meals[1]?.isBuy && !this.meals[1]?.isExpire"
              >
                <div slot="content" style="max-width: 15rem">
                  <div class="tit">
                    已购服务有效期至：{{
                      this.meals[1]?.expireDateStr.substring(
                        0,
                        this.meals[1]?.expireDateStr.indexOf(" ")
                      )
                    }}
                  </div>
                </div>
                <i class="el-icon-warning tip"></i>
              </el-tooltip>
              <span class="ti">
                有效日期：
                <span v-if="this.meals[1]?.isBuy && !this.meals[1]?.isExpire"
                  >{{
                    startDate(
                      this.meals[1]?.expireDateStr.substring(
                        0,
                        this.meals[1]?.expireDateStr.indexOf(" ")
                      )
                    )
                  }}
                  至
                  {{
                    cacuDateRJ(
                      this.meals[1]?.expireDateStr.substring(
                        0,
                        this.meals[1]?.expireDateStr.indexOf(" ")
                      )
                    )
                  }}</span
                >
                <span v-else>即时起至{{ cacuDate }}</span>
              </span>
            </div>
          </div>
        </div> -->
        <!-- 用户账户 -->
        <!-- <div class="key key2" v-if="activeKey == 2">
          <div class="title">
            <div class="tit">用户账户</div>
            <div class="desc">
              支持业务角色分类管理、多业态管理，
              实现账户资金进行清分及结算，并提供对账服务，
              实现资金流、信息流高效统一。
            </div>
          </div>

          <div class="service-list">
            <div
              class="list-item"
              :class="mealType == idx ? 'active' : ''"
              v-for="(item, idx) of serList1"
              :key="idx"
            >
              <div class="top-img">
                <img :src="require(`@/assets/imgs${item.imgUrl}.png`)" />
              </div>
              <div class="title">
                {{ item.title }}
              </div>
              <div class="desc">
                {{ item.desc }}
              </div>
            </div>
          </div>
          <div class="order-list">
            <div>
              <span class="tit">选择购买时长</span>
              <el-radio-group v-model="defaultOrder" @input="seleOrder">
                <el-radio
                  :label="idx"
                  v-for="(item, idx) of orderList"
                  :key="idx"
                >
                  <span>{{ item.time }} {{ item.count }}元</span>
                  <span class="discount" v-if="item.discount !== 1"
                    >{{ item.discount * 100 }}折</span
                  >
                </el-radio>
              </el-radio-group>
            </div>
            <div class="outTime">
              <el-tooltip
                class="item"
                effect="dark"
                content="Left Center 提示文字"
                placement="top"
                v-if="this.meals[2]?.isBuy && !this.meals[2]?.isExpire"
              >
                <div slot="content" style="max-width: 15rem">
                  <div class="tit">
                    已购服务有效期至：{{
                      this.meals[2]?.expireDateStr.substring(
                        0,
                        this.meals[2]?.expireDateStr.indexOf(" ")
                      )
                    }}
                  </div>
                </div>
                <i class="el-icon-warning tip"></i>
              </el-tooltip>
              <span class="ti">
                有效日期：
                <span v-if="this.meals[2]?.isBuy && !this.meals[2]?.isExpire"
                  >{{
                    startDate(
                      this.meals[2]?.expireDateStr.substring(
                        0,
                        this.meals[2]?.expireDateStr.indexOf(" ")
                      )
                    )
                  }}
                  至
                  {{
                    cacuDateRJ(
                      this.meals[2]?.expireDateStr.substring(
                        0,
                        this.meals[2]?.expireDateStr.indexOf(" ")
                      )
                    )
                  }}</span
                >
                <span v-else>即时起至{{ cacuDate }}</span>
              </span>
            </div>
          </div>
        </div> -->
      </div>
    </el-card>

    <!-- 订单组件部分 -->
    <div v-if="command != 2">
      <el-card style="min-width: 1200px; margin-top: 10px">
        <div class="total-list">
          <div class="item">
            <div class="tit">订单金额</div>
            <div class="count">¥{{ currentOrder.fmtPrice }}</div>
          </div>
          <div class="item">
            <div class="tit">优惠券</div>
            <div class="count">¥{{ currentOrder.fmtCouponPrice }}</div>
          </div>
          <div class="item">
            <div class="tit">优惠金额</div>
            <div class="count light">¥{{ caculCount }}</div>
          </div>
          <div class="item">
            <div class="tit">支付金额</div>
            <div class="count" style="font-weight: 600">¥{{ caculCoupon }}</div>
          </div>
        </div>
      </el-card>
      <div class="btn-command">
        <span class="moduleClass"
          >下单成功后,您将收到
          <el-link
            type="primary"
            style="margin-right: 10px"
            @click.prevent="getModuleUrl()"
            >《云尘付软件服务协议》</el-link
          >,请及时签署并保存</span
        >
        <!-- <el-button style="width: 148px">定制需求</el-button> -->
        <el-button
          type="primary"
          style="width: 148px"
          @click="showInfo(curId, activeKey == 1 ? 4 : 5)"
          >立即下单</el-button
        >
      </div>
    </div>
    <div v-else class="juhePayArea">
      <div class="left">
        有效日期：
        <span
          >{{ this.upgrableDateBegin }}
          至
          {{ this.upgrableDateEnd }}</span
        >
        <!-- <span v-else>即时起至{{ cacuDate }}</span> -->
      </div>
      <div class="right">
        <div>
          应付金额：<span>¥{{ curMealAmount }}</span>
        </div>
        <el-button
          class="btn"
          type="primary"
          @click="showInfo(mealId, mealType + 1)"
          >立即下单</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
// import mixin from "@/mixins/mixin";
import { getToken } from "@/utils/public";

export default {
  name: "purchaseView",
  // mixins: [mixin],
  data() {
    return {
      // curMeal: null,
      // curServer: meals.length? meals[0]:[],
      oriMeal: 0, //原始套餐
      command: 0, //用户套餐操作标识
      mealType: 0,
      mealId: "",
      mealList: [
        {
          imgUrl: "/middleWork/t1",
          title: "标准版",
          desc: "简单快捷实现多平台收款",
          price: "0.00",
          cList: [
            "支持所有支付渠道",
            "3个应用账单管理",
            "交易接口最大并发数 0次/秒",
            "接口调用次数0次/月",
          ],
        },
        {
          imgUrl: "/middleWork/t2",
          title: "专业版",
          desc: "满足中型企业多业态收款需求",
          price: "0.00",
          cList: [
            "支持所有支付渠道",
            "10个应用账单管理",
            "交易接口最大并发数 0次/秒",
            "接口调用次数0次/月",
            "专属服务人员1V1",
          ],
        },
        {
          imgUrl: "/middleWork/t3",
          title: "旗舰版",
          desc: "简单快捷实现多平台收款",
          price: "0.00",
          cList: [
            "支持所有支付渠道",
            "50个应用账单管理",
            "交易接口最大并发数 0次/秒",
            "接口调用次数0次/月",
            "专属服务人员1V1",
            "技术团队支持",
          ],
        },
      ],
      curMealAmount: 0, //融聚当前版本金额
      serList: [
        {
          imgUrl: "/middleWork/s1",
          title: "多级商户管理",
          desc: "商户创建、管理",
        },
        {
          imgUrl: "/middleWork/s2",
          title: "分账管理",
          desc: "分账规则、分账订单、应收应付、多方结算",
        },
        {
          imgUrl: "/middleWork/s3",
          title: "订单管理",
          desc: "订单查询、支付及退款管理",
        },
        {
          imgUrl: "/middleWork/s4",
          title: "财务管理",
          desc: "财务明细、汇总以及报表下载",
        },
      ],
      serList1: [
        {
          imgUrl: "/middleWork/s5",
          title: "会员用户管理",
          desc: "会员创建及余额管理",
        },
        {
          imgUrl: "/middleWork/s6",
          title: "钱包管理",
          desc: "企业余额、转账、消费管理及财务 汇总",
        },
        {
          imgUrl: "/middleWork/s7",
          title: "营销卡券",
          desc: "营销场景下卡券、红包管理",
        },
      ],
      orderList: [
        {
          time: "1年",
          count: 49999,
          discount: 1,
        },
        {
          time: "2年",
          count: 99998,
          discount: 0.95,
        },
        {
          time: "3年",
          count: 149997,
          discount: 0.85,
        },
      ],
      defaultOrder: 0, //默认订单类型
      currentOrder: {
        year: "1",
        count: 49999,
        discount: 1,
      },
      multipleSelection: [],
      isPatch: false, //批量切换
      isTep: 1, //表格按钮切换
      activeKey: "0", //切换tab
      // mixinViewModuleOptions: {
      //   getDataListURL: "/api/merchant/settleBalanceDrawcash/searchByPage",
      // },
      drawer: false,
      dataForm: {
        orderNo: "",
        // memberName: "",
        payformChannel: "",
        status: "",
        date: [],
      },
      detailsInfo: {},
      payChannel: [
        { id: 1, label: "所有", value: "" },
        { id: 2, label: "微信", value: "wechat" },
        { id: 3, label: "支付宝", value: "ali" },
        { id: 4, label: "汇付", value: "ada" },
      ],
      statusList: [
        { id: 1, label: "所有", value: "" },
        { id: 2, label: "已完成", value: "success" },
        { id: 3, label: "处理中", value: "processing" },
        { id: 4, label: "提现失败", value: "fail" },
      ],
      couponAmount: 0, //优惠券
      listType: 0, //默认融聚
      meals: [], //套餐种类
      upgrableDateBegin: "",
      upgrableDateEnd: "",
      yearNum: "1",
      curId: 0,
    };
  },
  created() {
    let id = this.$route.query.id;
    let type = this.$route.query.type; //类型
    let mealId = this.$route.query.mealId;
    let command = this.$route.query.command; //操作
    this.activeKey = type.toString();
    this.command = command;
    this.mealId = mealId;
    // if (type == 0) {
    //   // 融聚
    //   switch (meal) {
    //     case "标准版":
    //       if (command == 2) {
    //         this.mealType = 1;
    //       } else {
    //         this.mealType = 0;
    //       }
    //       this.oriMeal = 0;
    //       break;
    //     case "专业版":
    //       if (command == 2) {
    //         this.mealType = 2;
    //       } else {
    //         this.mealType = 1;
    //       }
    //       this.oriMeal = 1;
    //       break;
    //     case "旗舰版":
    //       this.mealType = 2;
    //       this.oriMeal = 2;
    //       break;
    //     default:
    //       break;
    //   }
    // }
    this.getMealList(id);
  },
  methods: {
    getToken,
    getModuleUrl() {
      this.$http.get("/api/meal/contract/getContractTempPage").then((res) => {
        if (res.code === "0000") {
          // console.log(res.data);
          if (res.data) {
            window.open(res.data);
          }
        }
      });
    },
    //下载文件
    // downloadFile() {
    //   var URL =
    //     window.location.origin +
    //     `/merchantApi/api/meal/contract/getContractTempPage`;
    //   this.windowOpen(URL, "云尘付软件服务协议.pdf");
    // },
    // windowOpen(url, fileName) {
    //   let len = [8, 9, 10, 11, 12][
    //     Math.floor(Math.random() * [8, 9, 10, 11, 12].length)
    //   ];
    //   let curTmp = new Date().getTime();

    //   var this_ = this;
    //   var xhr = new XMLHttpRequest();
    //   // var fileName = window.fileName + typeName; // 文件名称
    //   xhr.open("GET", url, true);
    //   xhr.responseType = "blob";
    //   xhr.setRequestHeader("Accept", "application/json, text/plain, */*");
    //   xhr.setRequestHeader("auth_token", getToken());
    //   xhr.setRequestHeader("auth_tmp", curTmp);
    //   xhr.setRequestHeader("auth_tck", crypto.set(
    //     getToken() + "_" + curTmp + "_" + randomWord(len),
    //     "a1g0qoalvv19aed3"
    //   ));
    //   // xhr.setRequestHeader("auth_tmp", this.curTmp);
    //   // xhr.setRequestHeader("auth_tck", this.curTck);
    //   // xhr.setRequestHeader(
    //   //   "app_id",
    //   //   this.$store.state.appId ? this.$store.state.appId : ""
    //   // );
    //   xhr.onload = function () {
    //     if (this.status === 201) {
    //       console.log(111);
    //       this_.$message.success("开始下载！");
    //       // this_.$message.success("下载成功！");
    //       var type = xhr.getResponseHeader("Content-Type");
    //       var blob = new Blob([this.response], { type: type });
    //       if (typeof window.navigator.msSaveBlob !== "undefined") {
    //         /*
    //          * For IE
    //          * >=IE10
    //          */
    //         window.navigator.msSaveBlob(blob, fileName);
    //       } else {
    //         /*
    //          * For Non-IE (chrome, firefox)
    //          */
    //         var URL = window.URL || window.webkitURL;
    //         var objectUrl = URL.createObjectURL(blob);
    //         if (fileName) {
    //           var a = document.createElement("a");
    //           if (typeof a.download === "undefined") {
    //             window.location = objectUrl;
    //           } else {
    //             a.href = objectUrl;
    //             a.download = fileName;
    //             document.body.appendChild(a);
    //             a.click();
    //             a.remove();
    //           }
    //         } else {
    //           window.location = objectUrl;
    //         }
    //       }
    //     }
    //     // else {
    //     //   this_.$http
    //     //     .get(`/api/bill/downloadCenter/download?id=${this_.downId}`)
    //     //     .then();
    //     // }
    //   };
    //   xhr.send();
    // },
    cacuMeals(meals) {
      let meal = [];
      if (meals && meals.length) {
        if (this.command == "2") {
          meal = [meals[0]];
        } else {
          meal = meals;
        }
        return meal;
      }
    },
    showImg(id) {
      if (id) {
        return window.location.origin + `/merchantApi/oss/view?id=${id}`;
      }
    },
    listToArr(str) {
      let aa;
      if (str && str.length) {
        aa = str.split(",");
      }
      return aa;
    },
    startDate(timeStr) {
      // console.log(timeStr);
      // eslint-disable-next-line no-useless-escape
      var timearr = timeStr?.replace(/\:/g, "-").split("-");
      if (timearr && timearr.length > 0) {
        var y = Number(timearr[0]);
        var m = timearr[1];
        var d = timearr[2];
        return y + "." + m + "." + d;
      }
    },
    cacuDateRJ(timeStr) {
      // console.log(timeStr);
      // eslint-disable-next-line no-useless-escape
      var timearr = timeStr?.replace(/\:/g, "-").split("-");
      if (timearr && timearr.length > 0) {
        var y =
          Number(timearr[0]) +
          (this.currentOrder.year == "1"
            ? 1
            : this.currentOrder.year == "2"
            ? 2
            : this.currentOrder.year == "3"
            ? 3
            : this.currentOrder.year == "4"
            ? 4
            : 5);
        var m = timearr[1];
        var d = timearr[2];
        return y + "." + m + "." + d;
      }
    },
    getMealList(id) {
      this.$http.get("/sys/meal/listMeal").then((res) => {
        if (res.code === "0000") {
          console.log(res.data);
          this.meals = res.data;
          // this.curMeal = this.meals[0];
          this.handleQuery(id);
        }
      });
    },
    showInfo(id, type) {
      console.log(id);
      console.log(type);
      // console.log(this.yearNum);
      if (this.command != 2) {
        this.$http
          .post("/sys/meal/purchase", {
            // yearNum: this.activeKey == 0 ? "1" : this.yearNum,
            // type: String(type),
            mealId: id,
            mealPriceId: this.curPriId,
            // remark:
            //   type == 1
            //     ? "云尘付融聚交易标准版"
            //     : type == 2
            //     ? "云尘付融聚交易专业版"
            //     : type == 3
            //     ? "云尘付融聚交易旗舰版"
            //     : type == 4
            //     ? "云尘付多级商户系统"
            //     : "云尘付用户账户系统",
          })
          .then((res) => {
            if (res.code === "0000") {
              window.open(res.data.cashierUrl);
              setTimeout(() => {
                this.$router.push("/qiye/orderCenter");
              }, 3000);
            }
            // console.log(res.sub_code)
            if (res.sub_code == "SYS.ORDER_REPEAT") {
              setTimeout(() => {
                this.$router.push("/qiye/orderCenter");
              }, 1500);
            }
          });
      } else {
        //升级
        this.$http
          .post("/sys/meal/mealUpgradePay", {
            id,
            // remark:
            //   type == 1
            //     ? "云尘付融聚交易标准版"
            //     : type == 2
            //     ? "云尘付融聚交易专业版"
            //     : type == 3
            //     ? "云尘付融聚交易旗舰版"
            //     : type == 4
            //     ? "云尘付多级商户系统"
            //     : "云尘付用户账户系统",
          })
          .then((res) => {
            if (res.code === "0000") {
              // console.log(res.data);
              this.$message.success("套餐升级成功");
              this.goBack();
            }
          });
      }
    },
    seleOrder(val) {
      console.log(val);
      this.currentOrder = this.orderList[val];
      this.curPriId = this.currentOrder.id;
      this.yearNum = String(val + 1);
      console.log(this.yearNum);
      console.log(this.currentOrder);
    },
    //切换套餐
    changeMeal(index) {
      // console.log(index);
      // console.log(this.mealType);
      if (this.command == 2) {
        //套餐升级
        this.mealType = index;
        this.curMealAmount = this.juheList[index].upgrableSholdPay;
        this.mealId = this.juheList[index].id;
        // if (index <= this.oriMeal) {
        //   this.$message.error("无法升级当前版本，请选择较高版本");
        // } else {

        // }
      } else if (this.command == 1) {
        //续约
        // this.$message.error("续约只支持当前正在使用的版本");
      } else {
        //购买
        console.log(index);
        console.log(this.mealType);
        this.mealType = index;
        this.orderList = this.mealList[index].baseServiceMealPriceList; //版本价格
        this.currentOrder = this.orderList[0];
        console.log(this.currentOrder);

        this.curId = this.mealList[index].id;
        this.curPriId = this.currentOrder.id;
        // this.curMealAmount = this.juheList[index].fmtMealPrice;
        // this.mealId = this.juheList[index].id;
        // console.log(this.oriMeal);
        // if (index < this.oriMeal) {
        //   this.$message.error("无法购买此版本，请选择较高版本");
        // } else {
        //   this.mealType = index;
        //   this.curMealAmount = this.juheList[index].fmtMealPrice;
        //   this.mealId = this.juheList[index].id;
        // }
      }
    },
    goBack() {
      this.$backTo(`/qiye/accountView`);
    },
    handleTab() {
      if (this.command == "2") {
        console.log(1111111111111);
        return;
      }
      // this.curServer = this.meals[this.activeKey];
      // console.log(this.curServer);
      this.currentOrder = this.orderList[0];
      this.defaultOrder = 0; //默认订单类型
      this.yearNum = "1";
      // console.log(this.meals[this.activeKey].id);
      this.mealId = this.meals[this.activeKey].mealId;
      this.handleQuery(this.meals[this.activeKey].id);
    },
    handleClick() {
      this.isPatch = true;
      this.isTep = 2;
    },
    resetClick() {
      this.isPatch = false;
      this.multipleSelection = [];
      this.$refs.multipleTable.clearSelection();
      this.isTep = 1;
      // console.log(this.multipleSelection);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    // handleClick(tab, event) {
    //   // console.log(tab, event);
    // },
    handleDetails(row) {
      this.drawer = true;
      this.detailsInfo = {
        提现时间: row.gmtCreated,
        商户: row.memberName,
      };
    },
    handleQuery(id) {
      if (this.command == 2) {
        //升级
        this.$http
          .post("/sys/meal/mealUpgrade")
          .then((res) => {
            if (res.code == "0000") {
              console.log(res.data);
              this.mealList = res.data;
              let list = res.data;
              console.log(this.mealType);
              this.juheList = res.data;
              // this.mealList.forEach((item, idx) => {
              //   item.id = list[idx].id;
              //   item.title = list[idx].mealName;
              //   item.price = list[idx].fmtMealPrice;
              //   item.cList[2] = `交易接口最大并发数 ${
              //     list[idx].id !== "ao10aq_04d53185b271410996b6fd3324873f0c"
              //       ? list[idx].tradeQps
              //       : "200"
              //   }${
              //     list[idx].id == "ao10aq_04d53185b271410996b6fd3324873f0c"
              //       ? "+"
              //       : ""
              //   }次/秒,`;
              //   item.cList[3] = `接口调用次数 ${list[idx].tradeLimitTimes}次/月,`;
              //   // item.isOut = this.meals[0].baseServiceMealList.find(
              //   //   (meal) => meal.id == item.id
              //   // );
              // });
              this.curMealAmount = list[this.mealType].upgrableSholdPay;
              this.mealId = list[this.mealType].id;
              this.upgrableDateBegin = list[this.mealType].upgrableDateBegin; //升级有效期
              this.upgrableDateEnd = list[this.mealType].upgrableDateEnd;
            }
          })
          .catch(() => {});
        // if (this.activeKey == 0) {
        //   //融聚套餐
        // } else {
        //   this.$http
        //     .get(
        //       `/sys/meal/getMeal?serviceId=${id}&isRongju=${
        //         this.activeKey == 0 ? true : false
        //       }`
        //     )
        //     .then((res) => {
        //       if (res.code === "0000") {
        //         let list = res.data;
        //         this.juheList = res.data;
        //         if (this.activeKey == 1) {
        //           this.singleAmount = list[0].fmtMealPrice; //单价
        //           this.couponAmount = list[0].couponAmount; //优惠
        //           this.curId = list[0].id;
        //           this.orderList.map((item) => {
        //             switch (item.time) {
        //               case "1年":
        //                 return (item.count = this.singleAmount);
        //               case "2年":
        //                 return (item.count = (this.singleAmount * 2).toFixed(
        //                   2
        //                 ));
        //               case "3年":
        //                 return (item.count = (this.singleAmount * 3).toFixed(
        //                   2
        //                 ));
        //               default:
        //                 return item;
        //             }
        //           });
        //           // console.log(this.orderList);
        //           this.currentOrder = this.orderList[0];
        //         } else if (this.activeKey == 2) {
        //           this.singleAmount = list[0].fmtMealPrice; //单价
        //           this.couponAmount = list[0].couponAmount;
        //           this.curId = list[0].id;
        //           this.orderList.map((item) => {
        //             switch (item.time) {
        //               case "1年":
        //                 return (item.count = this.singleAmount);
        //               case "2年":
        //                 return (item.count = (this.singleAmount * 2).toFixed(
        //                   2
        //                 ));
        //               case "3年":
        //                 return (item.count = (this.singleAmount * 3).toFixed(
        //                   2
        //                 ));
        //               default:
        //                 return item;
        //             }
        //           });
        //           this.currentOrder = this.orderList[0];
        //         }
        //       }
        //     });
        // }
      } else {
        let param = {
          serviceId: id,
          mealId: this.mealId,
          operationType:
            this.command == 0
              ? "buy"
              : this.command == 1
              ? "renew"
              : "upgradation",
        };
        this.$http.post(`/sys/meal/getMeal`, param).then((res) => {
          if (res.code === "0000") {
            console.log(res.data);
            this.mealList = res.data;

            this.orderList = this.mealList[0].baseServiceMealPriceList; //版本价格
            this.currentOrder = this.orderList[0];
            // console.log(this.currentOrder);
            this.curId = this.mealList[0].id;
            this.curPriId = this.currentOrder.id;

            // let list = res.data;
            // this.juheList = res.data;
            // if (this.activeKey == 0) {
            //   this.mealList.forEach((item, idx) => {
            //     item.id = list[idx].id;
            //     item.title = list[idx].mealName;
            //     item.price = list[idx].fmtMealPrice;
            //     item.cList[2] = `交易接口最大并发数 ${
            //       list[idx].id !== "ao10aq_04d53185b271410996b6fd3324873f0c"
            //         ? list[idx].tradeQps
            //         : "200"
            //     }${
            //       list[idx].id == "ao10aq_04d53185b271410996b6fd3324873f0c"
            //         ? "+"
            //         : ""
            //     }次/秒,`;
            //     item.cList[3] = `接口调用次数 ${list[idx].tradeLimitTimes}次/月,`;
            //   });
            //   this.curMealAmount = list[this.mealType].fmtMealPrice;
            //   this.mealId = list[this.mealType].id;
            // } else if (this.activeKey == 1) {
            //   this.singleAmount = list[0].fmtMealPrice; //单价
            //   this.couponAmount = list[0].couponAmount; //优惠
            //   this.curId = list[0].id;
            //   this.orderList.map((item) => {
            //     switch (item.time) {
            //       case "1年":
            //         return (item.count = this.singleAmount);
            //       case "2年":
            //         return (item.count = (this.singleAmount * 2).toFixed(2));
            //       case "3年":
            //         return (item.count = (this.singleAmount * 3).toFixed(2));
            //       default:
            //         return item;
            //     }
            //   });
            //   this.currentOrder = this.orderList[0];
            // } else {
            //   this.singleAmount = list[0].fmtMealPrice; //单价
            //   this.couponAmount = list[0].couponAmount;
            //   this.curId = list[0].id;
            //   this.orderList.map((item) => {
            //     switch (item.time) {
            //       case "1年":
            //         return (item.count = this.singleAmount);
            //       case "2年":
            //         return (item.count = (this.singleAmount * 2).toFixed(2));
            //       case "3年":
            //         return (item.count = (this.singleAmount * 3).toFixed(2));
            //       default:
            //         return item;
            //     }
            //   });
            //   this.currentOrder = this.orderList[0];
            // }
          }
        });
      }
    },
    getPatchList() {
      this.serList = [
        {
          imgUrl: "/middleWork/s1",
          title: "多级商户管理",
          desc: "商户创建、管理",
        },
        {
          imgUrl: "/middleWork/s2",
          title: "分账管理",
          desc: "分账规则、分账订单、应收应付、多方结算",
        },
        {
          imgUrl: "/middleWork/s3",
          title: "订单管理",
          desc: "订单查询、支付及退款管理",
        },
        {
          imgUrl: "/middleWork/s4",
          title: "财务管理",
          desc: "财务明细、汇总以及报表下载",
        },
      ];
      this.orderList = [
        {
          time: "1年",
          count: 49999,
          discount: 1,
        },
        {
          time: "2年",
          count: 99998,
          discount: 0.95,
        },
        {
          time: "3年",
          count: 149996,
          discount: 0.85,
        },
      ];
      this.currentOrder = {
        time: "1年",
        count: 49999,
        discount: 1,
      };
      this.defaultOrder = 0; //默认订单类型

      // this.$http
      //   .post("/api/merchant/mockapi/searchByPage", {
      //     pageNum: this.pageNum,
      //     pageSize: this.pageSize,
      //     params: {
      //       ...this.dataForm,
      //     },
      //     ...this.bodyForm,
      //   })
      //   .then((res) => {
      //     if (res.code !== "0000") {
      //       this.dataList = [];
      //       this.total = 0;
      //     }
      //     this.dataList = res.data.list;
      //     this.total = res.data.total;
      //   })
      //   .catch(() => {
      //     // this.dataListLoading = false
      //   });
    },
    getPatchList1() {
      this.serList = [
        {
          imgUrl: "/middleWork/s5",
          title: "会员用户管理",
          desc: "会员创建及余额管理",
        },
        {
          imgUrl: "/middleWork/s6",
          title: "钱包管理",
          desc: "企业余额、转账、消费管理及财务 汇总",
        },
        {
          imgUrl: "/middleWork/s7",
          title: "营销卡券",
          desc: "营销场景下卡券、红包管理",
        },
      ];
      this.orderList = [
        {
          time: "1年",
          count: 19999,
          discount: 1,
        },
        {
          time: "2年",
          count: 59998,
          discount: 0.95,
        },
        {
          time: "3年",
          count: 109996,
          discount: 0.85,
        },
      ];
      this.currentOrder = {
        time: "1年",
        count: 19999,
        discount: 1,
      };
      this.defaultOrder = 0; //默认订单类型

      // this.$http
      //   .post("/api/merchant/mockapi/searchByPage", {
      //     pageNum: this.pageNum,
      //     pageSize: this.pageSize,
      //     params: {
      //       ...this.dataForm,
      //     },
      //     ...this.bodyForm,
      //   })
      //   .then((res) => {
      //     if (res.code !== "0000") {
      //       this.dataList = [];
      //       this.total = 0;
      //     }
      //     this.dataList = res.data.list;
      //     this.total = res.data.total;
      //   })
      //   .catch(() => {
      //     // this.dataListLoading = false
      //   });
    },
  },
  computed: {
    cacuDate() {
      console.log(this.currentOrder);
      var date = new Date();
      var year =
        date.getFullYear() +
        (this.currentOrder.year == "1"
          ? 1
          : this.currentOrder.year == "2"
          ? 2
          : this.currentOrder.year == "3"
          ? 3
          : this.currentOrder.year == "4"
          ? 4
          : 5);
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      var enTime = year + "." + month + "." + day;
      return enTime;
    },
    caculCount() {
      return (
        (this.currentOrder.price / 100) *
          (1 - this.currentOrder.discount / 100) +
        this.currentOrder.couponPrice / 100
      ).toFixed(2);
    },
    caculCoupon() {
      return (
        this.currentOrder.price / 100 -
        ((this.currentOrder.price / 100) *
          (1 - this.currentOrder.discount / 100) +
          this.currentOrder.couponPrice / 100)
      ).toFixed(2);
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  .juhePayArea {
    position: fixed;
    bottom: 0;
    left: 190px;
    width: calc(100% - 190px);
    height: 70px;
    background: #ffffff;
    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.06);

    padding: 0 50px 0 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left,
    .right {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      // line-height: 20px;
    }
    .left {
      span {
        color: rgba(3, 191, 198, 1);
      }
    }
    .right {
      display: flex;
      align-items: center;
      div {
        margin-right: 40px;
      }
      .btn {
        width: 148px;
      }
    }
  }
  .btn-command {
    margin-top: 20px;
    // text-align: right;
    display: flex;
    justify-content: flex-end;
    .moduleClass {
      font-size: 12px;
      display: flex;
      align-items: center;
      margin-right: 15px;
    }
  }
  .total-list {
    padding-left: 20px;
    .item {
      display: flex;
      align-items: center;
      .tit {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        width: 56px;
        line-height: 40px;
      }
      .count {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #1d1c1c;
        margin-left: 48px;
        line-height: 40px;
        &.light {
          color: #f85a3d;
        }
      }
    }
  }
  .info {
    padding: 0 20px;
    .key {
      margin-top: 40px;
      .tit {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1d1c1c;
      }
      .desc {
        margin-top: 11px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .service-list {
        margin-top: 85px;
        display: flex;
        justify-content: center;
        padding-bottom: 60px;
        border-bottom: 1px solid #d8d8d8;
        .list-item {
          width: 232px;
          margin: 0 40px;
          .top-img {
            width: 30px;
            height: 30px;
          }
          .title {
            font-size: 22px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #1d1c1c;
            margin-top: 22px;
          }
          .desc {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #7a8287;
            margin-top: 4px;
          }
        }
      }

      .order-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0;
        padding-bottom: 10px;
        .tit {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          margin-right: 20px;
        }

        .discount {
          display: inline-block;
          width: 55px;
          height: 20px;
          background: url(@/assets/imgs/middleWork/order_dis.png) no-repeat
            center center;
          text-align: right;
          line-height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          padding-right: 5px;
          margin-left: 10px;
        }
        .outTime {
          display: flex;
          align-items: center;
          font-size: 19px;
          .tip {
            color: #869daa;
          }
          .ti {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #03bfc6;
            margin-left: 10px;
          }
        }
      }
    }
    .key1 {
      .meal-list {
        margin-top: 60px;
        display: flex;
        justify-content: center;
        border-bottom: 1px solid #d8d8d8;
        padding-bottom: 60px;

        .list-item {
          width: 292px;
          height: 603px;
          padding: 40px 30px;
          background: #ffffff;
          border-radius: 8px;
          margin: 0 10px;
          position: relative;
          cursor: pointer;

          &.active {
            background: #03bfc6;
          }
          .top-img {
            img {
              width: 24px;
            }
          }
          .title {
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #1d1c1c;
            margin-top: 22px;
            &.active {
              color: #fff;
            }
          }
          .desc {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
            margin-top: 3px;
            &.active {
              color: #fff;
            }
          }
          .price {
            font-size: 22px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #1d1c1c;
            margin-top: 40px;
            &.active {
              color: #fff;
            }
            s span {
              font-size: 32px;
            }
          }
          .c-list {
            margin-top: 32px;
            height: 330px;
            overflow: auto;

            .c-item {
              display: flex;
              // justify-content: center;
              align-items: center;
              margin-bottom: 22px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #7a8287;
              img {
                margin-right: 13px;
              }
              &.active {
                color: #fff;
              }
            }
          }
          .btn-area {
            position: absolute;
            left: 30px;
            bottom: 40px;
            .btn {
              width: 232px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #fff;
              &.active {
                color: #03bfc6;
              }
            }
          }
        }
      }
    }
  }

  :deep(.el-tabs .el-tabs__item) {
    width: auto;
    padding-right: 40px;
    height: 50px;
    line-height: 50px;
    &.is-active {
      background: transparent;
    }
  }

  :deep(.el-tabs .el-tabs__item:nth-of-type(1)) {
    padding-left: 0 !important;
  }

  :deep(.el-tabs .el-tabs__active-bar) {
    top: unset;
    z-index: 1;
  }

  :deep(.el-tabs__nav-wrap) {
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #e4e7ed;
    }
  }
}

.pedding {
  color: #ee8917;
}
.switch {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.ml {
  margin-left: 50px;
}
.search {
  position: absolute;
  right: 0;
  top: -164px;
}
</style>
